<template>
  <div style="margin-top: 5px;">
    <titleBox text="网格党组织力量"></titleBox>
    <div class="content" style="padding:20px 10px 0px 10px;">
      <div class="itemBox">
        <div class="item" v-for="(item, i) in data" :key="i">
          <div :style="{ backgroundImage: 'url(/img/myimg/wgllBg.png)' }" class="icon"></div>
          <div class="name">{{ item.name }}</div>
          <div class="num">{{  item.num  }}<span style="font-size:10px; font-weight: 400;">{{ item.unit }}</span></div>
        </div>
      </div>
      <div class="infoBox">
        <div class="title">鹭栖湖社区网格党组织情况</div>
        <div class="org-tree collapsable">
          <div class="org-tree-node">
            <div class="org-tree-node-children">
              <div class="org-tree-node" v-for="(m,i) in wgData" :key="i">
                <div class="org-tree-node-label" @click="wgModalShow" @dblclick="dblwgClick(m.center)">
                  <div class="org-tree-node-label-inner">{{m.name}}</div>
                </div>
                <div class="org-tree-node-children" v-if="m.children">
                  <div class="org-tree-node is-leaf" v-for="(n,j) in m.children" :key="j">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">{{n.name}}</div>
                    </div>
                    <div class="org-tree-node-children" v-if="n.children">
                      <div class="org-tree-node is-leaf" v-for="(k,l) in n.children" :key="l">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">{{k.name}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="org-tree-node">
                <div class="org-tree-node-label" @click="wgModalShow">
                  <div class="org-tree-node-label-inner">望江山片区</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">李德华</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">张静</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="org-tree-node">
                <div class="org-tree-node-label">
                  <div class="org-tree-node-label-inner">鹭栖湖片区</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">胡兰</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">网格员</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="org-tree-node is-leaf">
                <div class="org-tree-node-label">
                  <div class="org-tree-node-label-inner">兴洲观澜</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">钱均华</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">杨晓灵</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="org-tree-node is-leaf">
                <div class="org-tree-node-label">
                  <div class="org-tree-node-label-inner">克拉片区</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">伍佑均</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">王春梅</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="org-tree-node is-leaf">
                <div class="org-tree-node-label">
                  <div class="org-tree-node-label-inner">健坤城片区</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">邹洪平</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">闫凤芝</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="org-tree-node is-leaf">
                <div class="org-tree-node-label">
                  <div class="org-tree-node-label-inner">华翔城片区</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">赵强</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">舒小翠</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="org-tree-node is-leaf">
                <div class="org-tree-node-label">
                  <div class="org-tree-node-label-inner">湖光九里片区</div>
                </div>
                <div class="org-tree-node-children">
                  <div class="org-tree-node is-leaf">
                    <div class="org-tree-node-label">
                      <div class="org-tree-node-label-inner">冯慧</div>
                    </div>
                    <div class="org-tree-node-children">
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">网格员</div>
                        </div>
                      </div>
                      <div class="org-tree-node is-leaf">
                        <div class="org-tree-node-label">
                          <div class="org-tree-node-label-inner">网格员</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <wgModal ref="wgModalRef" @xfrw="xfrw"></wgModal>
    <xfrwModal ref="xfrwModalRef" @close="xfrwModalClose"></xfrwModal>
    <xfwrjrwModal ref="xfwrjrwModalRef" @close="xfwrjrwModalClose"></xfwrjrwModal>
  </div>
</template>
<script setup>
import { ref } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import wgModal from "../mConponents/modal/wgModal.vue"
import xfrwModal from "../mConponents/modal/xfrwModal.vue"
import xfwrjrwModal from "../mConponents/modal/xfwrjrwModal.vue"
const clickCount = ref(0)
const clickTimer = ref(null)

const emit = defineEmits(["toCenter"])
const dblwgClick = (e) => {
  clearTimeout(clickTimer.value)
  clickCount.value = 0
  emit("toCenter", e)
}

const wgModalRef = ref(null)
const wgModalShow = () => {
  clickCount.value++
  console.log(clickCount.value)
  if (clickCount.value === 1) {
    clickTimer.value = setTimeout(() => {
      wgModalRef.value.show()
      clickCount.value = 0
    }, 300)
  }

}
const xfrw = (e) => {
  if (e === "1") {
    xfrwModalShow()
  } else if (e === "2") {
    xfwrjrwModalShow()
  }
}
const xfrwModalRef = ref(null)
const xfrwModalShow = () => {
  wgModalRef.value.close()
  xfrwModalRef.value.show()
}
const xfrwModalClose = () => {
  wgModalShow()
}
const xfwrjrwModalRef = ref(null)
const xfwrjrwModalShow = () => {
  wgModalRef.value.close()
  xfwrjrwModalRef.value.show()
}
const xfwrjrwModalClose = () => {
  wgModalShow()
}

const data = ref([
  {
    name: "党支部",
    num: "7",
    unit: "个"
  },
  {
    name: "志愿者",
    num: "7",
    unit: "人"
  }
  // {
  //   name: "网格员"
  // },
  // {
  //   name: "居民骨干"
  // }
])

const wgData = [
  {
    name: "望江山片区",
    center: [105.558286, 30.465568, 0],
    children: [
      {
        name: "李德生",
        children: [
          {
            name: "张静"
          }
        ]
      }
    ]
  },
  {
    name: "鹭栖湖片区",
    center: [105.557684, 30.459025, 0],
    children: [
      {
        name: "胡兰",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "兴洲观澜",
    center: [105.561542, 30.452184, 0],
    children: [
      {
        name: "钱均华",
        children: [
          {
            name: "杨晓灵"
          }
        ]
      }
    ]
  },
  {
    name: "克拉片区",
    center: [105.561542, 30.452184, 0],
    children: [
      {
        name: "伍佑均",
        children: [
          {
            name: "王春梅"
          },
          {
            name: "何芳"
          }
        ]
      }
    ]
  },
  {
    name: "健坤城片区",
    center: [105.558923, 30.450145, 0],
    children: [
      {
        name: "邹洪平",
        children: [
          {
            name: "网格员"
          },
          {
            name: "闫凤芝"
          }
        ]
      }
    ]
  },
  {
    name: "湖光九里片区",
    center: [105.55108, 30.455366, 0],
    children: [
      {
        name: "冯慧",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "华翔城片区",
    center: [105.548485, 30.458243, 0],
    children: [
      {
        name: "赵强",
        children: [
          // {
          //   name: "李海凤"
          // },
          // {
          //   name: "舒小翠"
          // },
          // {
          //   name: "高环"
          // },
          {
            name: "龙会"
          },
          {
            name: "赵琳"
          },
          {
            name: "姜艳"
          }
        ]
      }
    ]
  },
  {
    name: "喜盈门",
    center: [105.55108, 30.455366, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "管委会",
    center: [105.558923, 30.450145, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  },
  {
    name: "义乌商贸",
    center: [105.55108, 30.455366, 0],
    children: [
      {
        name: "赵强",
        children: [
          {
            name: "网格员"
          }
        ]
      }
    ]
  }
]
</script>
<style scoped lang="scss">
.org-tree {
  width: 100%;
  margin: 0 auto;
  display: table;
  //横向排列
  &.collapsable .org-tree-node {
    display: table-cell;
    padding: 10px 0px 5px 1px;
    text-align: center;
    position: relative;

    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 50%;
      height: 20px;
    }
    &:before {
      top: 0;
      left: 0;
    }
    &:after {
      top: 0;
      left: 50%;
      border-left: 1px solid #ccc;
    }
    &:not(:first-child):before,
    &:not(:last-child):after {
      border-top: 1px solid #ccc;
    }
    .org-tree-node-label {
      // display: inline-block;
      position: relative;
      display: flex;
      justify-content: center;
      .org-tree-node-label-inner {
        // padding: 10px 0px;
        padding: 5px 0px 0 0px;
        margin: 10px 0 0 0;
        width: 20px;
        height: 100px;
        font-size: 10px;
        line-height: 15px;
        background: #4DDECF1A;
        border: 1px solid #4DDECF80;
        text-align: center;
        border-radius: 3px;

      }
    }
    .org-tree-node-children {
      padding-top: 10px;
      position: relative;
      &::before {
        content: "";
        display: block;
        width: 0;
        height: 10px;
        border-left: 1px solid #ccc;
        position: absolute;
        left: 50%;
        top: 0;
      }
    }
  }
  // &.collapsable>.org-tree-node:after {
  //   border-left: none;
  // }
}
  .content {
    padding: 20px 20px;
    background-color: #001a1dcc;

    border:1px solid #11AFC180;
    width: 340px;
    margin-top: 5px;
    .infoBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 15px;

      .title {
        width: 251.5009307861328;
        height: 32.75365447998047;
        border-width: 1px;
        padding-top: 4px;
        padding-right: 16px;
        padding-bottom: 4px;
        padding-left: 16px;
        gap: 10px;
        font-size: 14px;
        background: #4DDECF1A;
        border: 1px solid #4DDECF33
      }
    }

    .itemBox {
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .icon {
          width: 50px;
          height: 50px;
          background-size: 50px 50px;
        }

        .name {
          position: absolute;
          top: 0px;
          color: rgba(193, 244, 255, 1);
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 11px;
          line-height: 19.6px;
          letter-spacing: 0%;

        }

        .num {
          position: absolute;
          top: 20px;
          color: rgba(193, 244, 255, 1);
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 15px;
          line-height: 19.6px;
          letter-spacing: 0%;
        }
      }
    }
  }
 </style>
